<template>
  <div :class="layoutCls">
    <t-head-menu :class="menuCls" :theme="theme" expandType="popup" :value="active" style="padding: 0">
      <!-- <menu-content v-show="layout !== 'side'" class="header-menu" :navData="menu" /> -->
      <template #operations>
        <div class="operations-container">
          <div class="logo">
            <template v-if="$route.path.slice(0, 10) === '/dashboard'">
              <component :is="getLogo" :class="`${prefix}-side-nav-logo-${collapsed ? 't' : 'tdesign'}-logo`" />
            </template>
          </div>
          <div class="btn-content">
            <!-- <t-button v-if="$route.path.slice(10, 18) === '/content'" shape="round" @click="applyOfficialVersion">
              <shop-icon /> 申请正式版
            </t-button>
            <t-button v-if="$route.path.slice(10, 18) !== '/content'" shape="round" @click="applyOfficialVersion">
              <shop-icon /> 升级正式版
            </t-button> -->

            <template v-if="$route.path.slice(0, 10) !== '/dashboard'">
              <t-popup trigger="click">
                <t-button shape="square" variant="text">
                  <app-icon />
                </t-button>
                <template #content>
                  <div class="appContent">
                    <t-space direction="vertical" style="width: 100%">
                      <t-row justify="start">
                        <t-col :span="4" v-for="(item, index) in appPictures" :key="index">
                          <div>
                            <t-button class="appItem" block variant="text" @click="toOtherPage(item.index)">
                              <img :src="item.picUrl" />
                              <p>{{ item.title }}</p>
                            </t-button>
                          </div>
                        </t-col>
                      </t-row>
                    </t-space>
                  </div>
                </template>
              </t-popup>
            </template>

            <!-- <t-button theme="default" shape="square" variant="text">
              <help-circle-icon />
            </t-button>

            <t-popup trigger="click">
              <t-button theme="default" shape="square" variant="text">
                <internet-icon />
              </t-button>
              <template #content>
                <div>
                  <t-button variant="text" style="width: 88px">简体中文</t-button>
                </div>
                <div>
                  <t-button variant="text" style="width: 88px"> English </t-button>
                </div>
              </template>
            </t-popup> -->
            <template>
              <t-popup trigger="click">
                <t-avatar size="medium" :image="userInfo.avatar" style="margin-left: 10px" />
                <template #content>
                  <div class="user">
                    <div class="header" @click="personalAccount">
                      <div class="avatar">
                        <t-avatar size="large" :image="userInfo.avatar" style="margin-left: 10px" />
                      </div>
                      <div class="msg">
                        <div>{{ userInfo.name }}</div>
                        <span>{{ userInfo.orgName }}</span>
                      </div>
                    </div>
                    <t-divider style="width: 103.6%; margin: 0 -2%" />
                    <div class="content">
                      <t-button theme="default" variant="text" block @click="personalAccount">
                        <div class="words"><user-icon /> 个人账号</div>
                      </t-button>
                      <t-button theme="default" variant="text" block @click="busineseManage">
                        <div class="words"><home-icon /> 企业管理</div>
                      </t-button>
                      <t-button theme="default" variant="text" block @click="problemFeedback">
                        <div class="words"><service-icon /> 问题反馈</div>
                      </t-button>
                    </div>
                    <t-divider style="width: 103.6%; margin: 0 -2%" />
                    <div class="footer">
                      <t-button theme="default" variant="text" block @click="logOut">
                        <div class="words">退出登录</div>
                      </t-button>
                    </div>
                  </div>
                </template>
              </t-popup>
            </template>
          </div>
        </div>
      </template>
    </t-head-menu>
    <!-- 点击问题反馈的对话框 -->
    <t-dialog
      :visible="feedBodyVisible"
      :onClose="feedBodyClone"
      :onConfirm="feedBodyClone"
      :closeOnOverlayClick="false"
    >
      <template #header> <service-icon style="color: blue" /> 问题反馈 </template>
      <template slot="body">
        <t-form colon requiredMark labelAlign="top">
          <t-form-item label="请选择您要反馈的问题类型" requiredMark>
            <t-select
              name="select"
              placeholder="请选择问题类型"
              v-model="feedFormaDate.questionType"
              :options="feedOptions"
            >
            </t-select>
          </t-form-item>
          <t-form-item label="请简述您反馈的问题或者想咨询的内容" requiredMark>
            <t-input placeholder="请输入内容" v-model="feedFormaDate.questionContent" />
          </t-form-item>
          <t-form-item label="您的联系方式" name="tel" requiredMark>
            <t-input placeholder="手机号、邮箱、微信号均可" v-model="feedFormaDate.concat" />
          </t-form-item>
        </t-form>
        <div class="more-service">
          <p>如需要更多服务，您也可以通过以下方式联系我们：</p>
          <ul type="disc">
            <li>联系电话：15601773140（丁经理）</li>
            <li>电子邮箱：sales@pis360.com</li>
          </ul>
        </div>
      </template>
      <template #footer>
        <div class="t-btn">
          <t-space>
            <t-button @click="feedbackQuestion(0)">取消</t-button>
            <t-button @click="feedbackQuestion(1)">提交</t-button>
          </t-space>
        </div>
      </template>
    </t-dialog>
    <!-- 申请正式版 -->
    <t-dialog
      :visible="applyBodyVisible"
      :onClose="applyBodyClone"
      :onConfirm="applyBodyClone"
      :closeOnOverlayClick="false"
    >
      <template #header> <shop-icon style="color: blue" /> 申请正式版 </template>
      <template slot="body">
        <t-form colon requiredMark labelAlign="top">
          <t-form-item label="请选择您需要的产品" requiredMark>
            <t-select
              name="select"
              placeholder="请选择产品"
              v-model="applyFormaDate.questionType"
              :options="applyOptions"
              :disabled="isRouterBase !== 'content'"
            >
            </t-select>
          </t-form-item>
          <t-form-item label="您的联系方式" name="tel" requiredMark>
            <t-input placeholder="手机号、邮箱、微信号均可" v-model="applyFormaDate.concat" />
          </t-form-item>
        </t-form>
        <div class="more-service">
          <p>如需要更多服务，您也可以通过以下方式联系我们：</p>
          <ul type="disc">
            <li>联系电话：15601773140（丁经理）</li>
            <li>电子邮箱：sales@pis360.com</li>
          </ul>
        </div>
      </template>
      <template #footer>
        <div class="t-btn">
          <t-space>
            <t-button @click="apply(0)">取消</t-button>
            <t-button @click="apply(1)">提交</t-button>
          </t-space>
        </div>
      </template>
    </t-dialog>
    <!-- <t-message v-if="applyFormaDate.applyMsg"  theme="success">
      自定义关闭按钮（插槽）

      <br />111
      <template #closeBtn>
        <div class="t-message__close" @click="applyFormaDate.applyMsg = false">
          <b>x</b>
        </div>
      </template>
    </t-message> -->
  </div>
</template>

<script lang="jsx">
import LogoFull from '@/assets/logo-full.svg';
import { AppIcon, HelpCircleIcon, InternetIcon, HomeIcon, UserIcon, ServiceIcon, ShopIcon } from 'tdesign-icons-vue';
import { prefix } from '@/config/global';
// import { MessagePlugin } from 'tdesign-vue';
import { removeLocalStorage, setSessionStorage } from '@/utils/storage';
import { subQuestion } from '@/service/risk-assessment/dashboard/index';
import MenuContent from './MenuContent.vue';
import HeaderLogo from '@/components/HeaderLogo/index.vue';
import imgUrl1 from '@/assets/dashboard/p1.png';
import imgUrl2 from '@/assets/dashboard/p2.png';
import imgUrl3 from '@/assets/dashboard/p3.png';
import imgUrl6 from '@/assets/dashboard/p6.png';
import imgUrl7 from '@/assets/dashboard/p7.png';
import { mapState } from 'vuex';

export default {
  components: {
    MenuContent,
    AppIcon,
    HelpCircleIcon,
    InternetIcon,
    HeaderLogo,
    HomeIcon,
    UserIcon,
    ShopIcon,
    ServiceIcon,
  },
  props: {
    theme: String,
    layout: {
      type: String,
      default: 'top',
    },
    showLogo: {
      type: Boolean,
      default: true,
    },
    menu: {
      type: Array,
    },
    isFixed: {
      type: Boolean,
      default: false,
    },
    isCompact: {
      type: Boolean,
      default: false,
    },
    maxLevel: {
      type: Number,
      default: 3,
    },
  },
  data() {
    return {
      value: '',
      feedBodyVisible: false, // 控制反馈对话框
      applyBodyVisible: false, // 控制申请对话框
      successMsg: null,
      prefix,
      appPictures: [
        {
          index: 1,
          title: '风险评估',
          picUrl: imgUrl1,
        },
        {
          index: 2,
          title: 'App合规',
          picUrl: imgUrl3,
        },
        {
          index: 3,
          title: '数据发现',
          picUrl: imgUrl2,
        },
        {
          index: 4,
          title: '合规培训',
          picUrl: imgUrl6,
        },
        {
          index: 5,
          title: '合规智库',
          picUrl: imgUrl7,
        },
      ],
      // 问题反馈对话框
      feedFormaDate: {
        questionType: '',
        questionContent: '',
        concat: '',
      },
      // 问题选项
      feedOptions: [
        { label: 'BUG反馈', value: '1' },
        { label: '功能建议', value: '2' },
        { label: '问题查询', value: '3' },
        { label: '其他', value: '4' },
      ],
      // 申请正式版对话框
      applyFormaDate: {
        questionType: '',
        concat: '',
        applyMsg: true,
      },
      // 问题选项
      applyOptions: [
        { label: '风险评估', value: '1' },
        { label: 'App隐私合规', value: '2' },
        { label: '数据发现', value: '3' },
        { label: '企业风险感知', value: '4' },
        { label: '供应链风险管理', value: '5' },
      ],
    };
  },
  computed: {
    ...mapState('user', ['userInfo']),
    routeType() {
      if (this.$route.path.slice(0, 10) === '/dashboard') {
        return 'business';
      }
      return this.$store.state.user.routeType;
    },
    isRouterBase() {
      const path = this.$route.path.split('/');
      return path[2];
    },
    active() {
      if (!this.$route.path) {
        return '';
      }
      return this.$route.path
        .split('/')
        .filter((item, index) => index <= this.maxLevel && index > 0)
        .map((item) => `/${item}`)
        .join('');
    },
    layoutCls() {
      return [`${this.prefix}-header-layout`];
    },
    menuCls() {
      return [
        {
          [`${this.prefix}-header-menu`]: !this.isFixed,
          [`${this.prefix}-header-menu-fixed`]: this.isFixed,
          [`${this.prefix}-header-menu-fixed-side`]: this.layout === 'side' && this.isFixed,
          [`${this.prefix}-header-menu-fixed-side-compact`]: this.layout === 'side' && this.isFixed && this.isCompact,
        },
      ];
    },
    getLogo() {
      return LogoFull;
    },
    collapsed() {
      return this.$store.state.setting.isSidebarCompact;
    },
  },
  mounted() {
    this.userInfo.avatar = this.userInfo.avatar || 'https://tdesign.gtimg.com/site/avatar.jpg';
    this.$bus.$on('ApplyMsg', (obj) => {
      this.applyBodyVisible = obj.value;
      this.applyFormaDate.questionType = obj.type;
    });
  },
  methods: {
    logOut() {
      this.$router.push('/login');
      removeLocalStorage('pisToken');
    },
    problemFeedback() {
      this.feedBodyVisible = true;
    },
    applyOfficialVersion() {
      this.applyBodyVisible = true;
      if (this.isRouterBase !== 'content') {
        this.applyFormaDate.questionType = '1';
      }
    },
    feedBodyClone() {
      this.feedBodyVisible = false;
    },
    applyBodyClone() {
      this.applyBodyVisible = false;
    },
    busineseManage() {
      this.$store.commit('user/changeRouteType', 'business');
      setSessionStorage('routeType', 'business');
      this.$router.replace('/business-management/enterprise-info');
    },
    personalAccount() {
      // personal-account
      this.$router.replace('/dashboard/account');
    },
    // 问题反馈 提交
    async feedbackQuestion(val) {
      if (val) {
        const { questionType, questionContent, concat } = this.feedFormaDate;
        if (!questionType || !questionContent || !concat) {
          this.$message.warning('填写');
          return;
        }
        const feedback = {
          contactDetails: concat,
          content: questionContent,
          type: questionType,
        };
        const res = await subQuestion(feedback);
        if (res.data.code === 200) {
          this.feedBodyVisible = false;
          this.$message.success('提交成功');
        }
      }
      this.feedFormaDate.questionType = '';
      this.feedFormaDate.questionContent = '';
      this.feedFormaDate.concat = '';
      this.feedBodyVisible = false;
    },
    // 申请正式版
    async apply(val) {
      this.applyBodyVisible = false;
      this.applyFormaDate.applyMsg = false;
      if (val) {
        if (this.successMsg) {
          this.$message.close(this.successMsg);
          this.successMsg = null;
        }
        this.successMsg = this.$message.success({ content: this.content, closeBtn: this.closeBtn, icon: this.icon });
      }
    },
    toOtherPage(el) {
      if (el === 1) {
        this.$router.push('/risk-assessment');
        setSessionStorage('routeType', 'risk');
        this.$store.commit('user/changeRouteType', 'risk');
      }
    },
    // 申请成功内容
    content() {
      return (
        <div style="width:280px; padding:5px">
          <h3 style="margin-bottom:8px"> 您的申请已成功提交!</h3>
          <p>我们将尽快安排专属顾问与您联系，请注意保持联系方式畅通。感谢您的支持！</p>
        </div>
      );
    },
    closeBtn(close) {
      return (
        <b class="t-message__close" onClick={close}>
          x
        </b>
      );
    },
    icon() {
      return (
        <svg
          fill="none"
          viewBox="0 0 16 16"
          width="1em"
          height="1em"
          class="t-icon t-icon-check-circle-filled"
          style="color:#00A870;margin-bottom:60px"
        >
          <path
            fill="currentColor"
            d="M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z"
            fill-opacity="0.9"
          ></path>
        </svg>
      );
    },
  },
};
</script>

<style lang="less" scoped>
@import '@/style/variables.less';

.t-message__close {
  margin: 0 0 60px 0 !important;
}
.t-btn {
  display: flex;
  justify-content: center;
}
.more-service {
  font-size: 12px;
  font-weight: 400;
  margin-top: 10px;
  ul {
    margin: 0;
    padding-left: 20px;
    li {
      list-style: disc;
    }
  }
}

.user {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  // position: absolute;
  top: 100px;
  right: 100px;
  width: 240px;
  height: 200px;
  .words {
    margin-right: 80%;
  }

  // box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.12);
  .header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 9px;
    width: 240px;
    // padding: 6px 0;
    height: 64px;
    background: #ffffff;
    font-family: 'PingFang SC';
    // border-bottom: 1px solid #cccccc;
    .msg {
      width: 80%;
      div {
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 22px;
      }
      span {
        font-weight: 400;
        font-size: 12px;
        line-height: 20px;
        font-family: 'PingFang SC';
      }
    }
  }
  .content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 6px 8px;
    gap: 2px;
    width: 240px;
    height: 100px;
  }
  .footer {
    margin: 4px 0 0;
    gap: 2px;
    width: 240px;
  }
}

.operations-container {
  display: flex;
  width: 98.3vw;
  align-items: center;
  justify-content: space-between;
  .logo {
    // position: absolute;
    // left: 0;
    margin-top: 22px;
    margin-left: -14px;
  }
  .btn-content {
    position: absolute;
    right: 0;
    padding-right: 12px;
  }

  .t-popup__reference {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .t-button {
    margin: 0 8px;

    &.header-user-btn {
      margin: 0;
    }
  }
  .t-icon {
    font-size: 20px;

    &.general {
      margin-right: 16px;
    }
  }
}
.appContent {
  width: 210px;
  margin-left: 15px;
  .appItem {
    flex-direction: column;
    justify-content: center;
    align-content: center;
    font-size: 10px;
    height: 80px;
    width: 80%;
    margin: 8px 0;

    img {
      width: 46px;
      height: 46px;
    }
    p {
      line-height: -10px;
    }
  }
}

.header-user-account {
  display: inline-flex;
  align-items: center;
  color: var(--td-text-color-primary);

  .t-icon {
    margin-left: 4px;
    font-size: 16px;
  }
}

.t-head-menu__inner {
  padding-right: 10px;
  border-bottom: 1px solid var(--td-border-level-1-color);
}

.t-menu--light {
  .header-user-account {
    color: var(--td-text-color-primary);
  }
}

.t-menu--dark {
  .t-head-menu__inner {
    border-bottom: 1px solid var(--td-gray-color-10);
  }

  .header-user-account {
    color: rgba(255, 255, 255, 0.55);
  }

  .t-button {
    --ripple-color: var(--td-gray-color-10) !important;

    &:hover {
      background: var(--td-gray-color-12) !important;
    }
  }
}

.operations-dropdown-container-item {
  width: 100%;
  display: flex;
  align-items: center;

  .t-icon {
    margin-right: 8px;
  }

  .t-dropdown__item {
    .t-dropdown__item__content {
      display: flex;
      justify-content: center;
    }

    .t-dropdown__item__content__text {
      display: flex;
      align-items: center;
      font-size: 14px;
    }
  }

  .t-dropdown__item {
    width: 100%;
    margin-bottom: 0px;
  }

  &:last-child {
    .t-dropdown__item {
      margin-bottom: 8px;
    }
  }
}

.t-popup {
  z-index: 0;
}
</style>
